<template>
  <div>
    <el-input v-model="selectName" readonly :disabled="disabled" :placeholder="placeholder"
      ><el-button slot="append" icon="el-icon-search" @click="show" :disabled="disabled"></el-button
    ></el-input>
    <x-dialog
      title="供应商"
      :close-on-click-modal="false"
      :show.sync="visible"
      v-if="visible"
      class="supplier-dialog"
      append-to-body
      width="800px"
      :before-close="handleClose"
      @onCancel="handleClose"
      @onSubmit="handleSubmit"
    >
      <el-form :model="searchParams" ref="form" class="dialog-fliter">
        <el-row :gutter="20">
          <x-col>
            <el-form-item label="供应商编码">
              <el-input v-model="searchParams.supplierCode" placeholder="供应商编码"></el-input>
            </el-form-item>
          </x-col>
          <x-col>
            <el-form-item label="供应商名称">
              <el-input v-model="searchParams.fullName" placeholder="供应商名称"></el-input>
            </el-form-item>
          </x-col>
          <x-col>
            <el-form-item label="供应商类型" prop="mainServeType">
              <x-select-tree
                v-model="searchParams.mainServeType"
                ref="selectTree"
                :options="treeData"
                :placeholder="$t('config.supplierType.name')"
                :defaultProps="treeProps"
              />
            </el-form-item>
          </x-col>
          <x-col>
            <div class="search-btns">
              <el-button type="primary" @click="handleSearch">查询</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </x-col>
        </el-row>
      </el-form>
      <x-table
        :data-source="tableData"
        size="mini"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
        :pagination="pagination"
        :loading="loading"
        :row-key="'id'"
        :height="338"
      >
        <el-table-column width="60">
          <template #default="scope">
            <!-- label值要与el-table数据id实现绑定 -->
            <el-radio v-model="checked" :label="scope.row.id" @change="handleRowSelect(scope.row)">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column prop="supplierCode" label="供应商编码"></el-table-column>
        <el-table-column prop="fullName" label="供应商名称"></el-table-column>
        <el-table-column prop="mainServeTypeName" label="供应商类型"></el-table-column>
      </x-table>
    </x-dialog>
  </div>
</template>
<script>
import { TableListMixin, QueryDictMixin, PermissionsMixin } from '@package/utils'
import { listUrl, apiSupplierTypeTree } from './api'
import { EnumApiCode } from '../../../../../globalEnum'

export default {
  components: {},
  mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
  props: {
    supplierId: {
      type: String,
      default: ''
    },
    supplierState: {
      type: String,
      default: '3'
    },
    value: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      selectName: '',
      visible: false,
      searchParams: {},
      otherParam: {
        // 默认状态 3、正式供应商   2、潜在供应商
        supplierState: this.supplierState
      },
      listUrl,
      treeData: [], // 供应商类型下拉树
      treeProps: {
        label: 'supplierTypeName',
        children: 'children'
      },
      tableData: [],
      checked: null,
      selectData: [] // 选中的数据
    }
  },
  watch: {
    supplierId(val) {
      this.checked = val
    },
    value(val) {
      this.selectName = val
    }
  },
  methods: {
    show() {
      this.visible = true
      this.loadData()
      this.loadTreeData()
    },
    // 获取物料分类下拉树的数据
    async loadTreeData() {
      const { data, code, msg } = await apiSupplierTypeTree()
      if (code === EnumApiCode.Success) {
        this.treeData = data
      } else {
        this.$message.error(msg)
      }
    },
    handleSearch(val) {
      this.queryParam = { ...this.searchParams, ...val }
      this.loadData()
    },
    handleReset() {
      this.$refs.form.resetFields()
      this.searchParams.mainServeType = ''
      this.resetSearch()
    },
    // 多行选中
    handleSelectionChange(rows) {
      this.selectData = rows
    },
    // 单选某行选中
    handleRowSelect(row) {
      this.selectData = [row]
    },
    // 弹窗关闭
    handleClose() {
      this.checked = null
      this.selectData = []
      this.visible = false
    },
    // 弹窗确定
    handleSubmit() {
      if (this.selectData.length) {
        this.selectName = this.selectData[0].fullName
        this.$emit('on-change', this.selectData[0])
        this.handleClose()
      } else {
        this.$message.error('请至少选择一条数据点击确定')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.supplier-dialog {
  .dialog-fliter {
    // margin-bottom: 10px;
  }
  .x-table-container {
    height: 380px;
  }
  ::v-deep .el-form-container {
    background: none;
    box-shadow: none;
    border: none;
  }
  ::v-deep .el-form-content {
    padding: 0;
  }
  .search-btns {
    align-items: flex-end;
    display: flex;
    height: 70px;
  }
}
</style>
